import React from "react";
import { List } from "antd";
import { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";

const listItemStyle: React.CSSProperties = {
  color: "#fff",
  cursor: "pointer",
};

const siderbarStyle: React.CSSProperties = {
  padding: "0 16px",
  backgroundColor: "#000",
};

function Siderbar() {
  const [menu, setMenu] = useState([] as Array<{ name: string }>);

  useEffect(() => {
    window.electronAPI.getDatabaseList().then(function (value) {
      setMenu(value);
    });
  });

  return (
    <div className="siderbar" style={siderbarStyle}>
      <List
        itemLayout="horizontal"
        dataSource={menu}
        renderItem={(item) => (
          <List.Item>
            <NavLink
              to={"/database/" + item.name + "/table/list"}
              style={listItemStyle}
            >
              {item.name}
            </NavLink>
          </List.Item>
        )}
      ></List>
    </div>
  );
}

export default Siderbar;
